<html>
<head>
    <title>jQuery Hint Demo</title>
    <style>
body { font-size: 11pt; }
.top { font-size: 1.2em; }
.box {
    margin: 0px 5px;
    padding: 5px;
    border: 1px dotted black;
}
.main { height: 9em }
.hint { color: #999; }
.alt {
    color: #666;
    font-style: italic;
}
    </style>
    <script type="text/javascript" src="../../jquery.1.3.2.js"></script>
    <script type="text/javascript" src="jquery.hint.js"></script>
    <script type="text/javascript" src="jquery.metadata.js"></script>
    <script type="text/javascript" src="../log/log.js"></script>
    <script type="text/javascript">
$(function() {
    $('#all').click(function() {
        $.hint();
    });
    $('#titles').click(function() {
        $.hint({attr:'title'});
    });
    $('#alt').click(function() {
        $('input:password').hint('[type password]', {on: 'alt'});
        $('textarea').hint('[type multiple lines]', {on: 'alt'});
        $('input:text').hint('[type one line]', {on: 'alt'});
    });
    $('#keep').click(function() {
        $('[name]').hint({method:'valueSwap'});
    });
});
    </script>
</head>
<body>
<div class="top box">
    Push a button, click and type in the fields.<br>
    View the source code to see how it all works.
</div>
<br clear="all">
<div class="box main">
    <button id="all">Defaults</button>
    <button id="titles">Using Titles</button>
    <button id="alt">Alternates</button>
    <button id="keep">Value Swap</button>
    <br>
    <div>
    <label for="a">A</label>
    <input type="text" name="a" value="" title="Input Hint">
    <input class="{inline: true, attr: 'name', labelCss:{top:0}}" type="text" name="foo">
    </div>
    <label for="b">B</label>
    <textarea name="b" title="Textarea Hint" class="{toggleOnFocus:false}"></textarea>
    <br>
    <div>
    <label for="c">C</label>
    <input type="password" name="c" value="" title="Password Hint">
    </div>
</div>
</body>
</html>